<script setup lang="ts">
import LdxConfigPanel from './LdxConfigPanel.vue'
import { useForm, useTable } from '@/hooks'
import { ActivityApi } from '@/apis'

defineOptions({
  name: 'ActivityList',
})

const LdxConfigPanelRef = ref<InstanceType<typeof LdxConfigPanel>>()
const { form } = useForm<ActivityApi.ActivityQuery>({
})

const {
  tableData,
  loading,
  search,
} = useTable(() => ActivityApi.getActivityList(form))

const onStatusChange = async (item) => {
  await ActivityApi.updateActivity(item, item.id)
  search()
}

const openConfig = (item) => {
  switch (item.code) {
    case 'ldx':
      LdxConfigPanelRef.value?.edit(item)
  }
}
</script>

<template>
  <ProPage title="营销活动列表">
    <a-spin class="w-full" style="min-height: 400px;" :loading="loading">
      <a-empty v-if="tableData.length === 0">
        无营销活动
      </a-empty>
      <div v-else class="flex flex-wrap gap-15px">
        <div v-for="(item, index) in tableData" :key="index" class="item">
          <a-space direction="horizontal">
            <a-image width="54" src="/src/assets/icons/activity.svg" />
            <div class="h-54px flex-col-start-start">
              <span class="mb-8px text-16px text-black font-500">
                {{ item.name }}
                <a-link @click="openConfig(item)">配置</a-link>
              </span>
              <span class="text-13px text-gray">{{ item.description }}</span>
            </div>
          </a-space>
          <DictSelect v-model="item.status" v-permission="['shop:activity:write']" type="switch" @change="onStatusChange(item)" />
        </div>
      </div>
    </a-spin>
    <LdxConfigPanel ref="LdxConfigPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped>
.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  width: 360px;
  height: 80px;

  padding: 12px 8px;

  border: 1px solid var(--color-neutral-3);
  border-radius: var(--border-radius-medium);
}
</style>
